<template>
  <div class="table-layout">
    <je-panel v-bind="lauoutOptions">
      <template #left>
        <TableTree
          @callBackInfo="handlInfo"
          @getProductData="getProductData"
          @syncTableRefresh="syncTableRefresh"
        />
      </template>
      <template #default>
        <TableDesignLayout
          :tabdata="tabPanelData"
          :product-data="productData"
          :sync-refresh="syncRefresh"
        />
      </template>
    </je-panel>
  </div>
</template>
<script>
  import { defineComponent, ref } from 'vue';
  import { Panel } from '@jecloud/ui';
  import TableTree from './table-tree/index.vue';
  import TableDesignLayout from './table-design/layout.vue';
  export default defineComponent({
    name: 'TableLayout',
    components: {
      JePanel: Panel,
      TableTree,
      TableDesignLayout,
    },
    setup(props) {
      const tabPanelData = ref({});
      const handlInfo = (data) => {
        tabPanelData.value = data;
      };
      const productData = ref({});
      const getProductData = (data) => {
        productData.value = data;
      };
      const syncRefresh = ref(true);
      const syncTableRefresh = () => {
        syncRefresh.value = !syncRefresh.value;
      };
      return {
        handlInfo,
        tabPanelData,
        lauoutOptions: {
          left: { size: 232, split: true, minSize: 232, maxSize: 880 },
        },
        getProductData,
        productData,
        syncTableRefresh,
        syncRefresh,
      };
    },
  });
</script>
<style lang="less" scoped>
  .table-layout {
    height: 100%;
    .jeicon {
      font-size: 14px;
    }
  }
</style>
